<template>
  <div>
    简历投递界面
    
    <!-- 搜索与筛选条件卡片 -->
    <el-card class="optionTable" shadow="hover">
      <!-- 搜索模块：包含输入框和检索结果浮层 -->
      <div class="search">
         <!-- 浮层显示位置 -->
             <!-- 浮层标题 -->
               <!-- 浮层宽度 -->
                 <!-- 控制浮层显示状态 -->
        <el-popover
          placement="bottom"     
          title="检索结果"      
          width="50%"            
          :visible="visible"      
        >
          <template #reference>   <!-- 触发浮层的参考元素（搜索输入框） -->
               <!-- 双向绑定搜索关键词 -->
                 <!-- 样式类：宽度50%+间距 -->
                   <!-- 输入提示文本 -->
                     <!-- 输入框前缀图标 -->
                      <!-- 搜索类型输入框 -->
                        <!-- 输入框尺寸 -->
                           <!-- 输入时显示浮层 -->
                             <!-- 失去焦点时隐藏浮层 -->
            <el-input
              v-model="searchText"       
              class="w-50 m-2"             
              placeholder="请输入关键字"     
              :prefix-icon="Search"        
              type="search"                 
              size="large"                 
              @input="visible=true"       
              @blur="visible=false"        
            />
          </template>

          <!-- 搜索结果列表（有结果时显示） -->
           <!-- 遍历搜索结果 -->
             <!-- 唯一键值 -->
               <!-- 结果项样式类 -->
                <!-- 点击跳转详情页 -->
          <div v-if="searchlist.length">
            <div
              v-for="data in searchlist"    
              :key="data.id"               
              class="search-item"          
              @click="handleChangepage(data.id)" 
            >
              {{ data.title }}              <!-- 显示搜索结果标题 -->
            </div>
          </div>
          <!-- 无搜索结果时的空状态提示 -->
             <!-- 空状态描述 -->
              <!-- 空状态图标尺寸 -->
          <div v-else>
            <el-empty
              description="暂无"          
              :image-size="50"             
            />
          </div>
        </el-popover>
      </div>

      <!-- 专业筛选下拉菜单 -->
      <div>
        <el-col>
          <span style="margin-right:10px">专业</span>
           <!-- 绑定专业筛选值 -->
               <!-- 下拉框默认提示 -->
                   <!-- 下拉框宽度 -->
          <el-select 
            v-model="tableOptions.majorChoice"  
            placeholder="Select"             
            style="width: 240px"              
          >
           <!-- 遍历专业选项 -->
               <!-- 唯一键值 -->
                  <!-- 选项显示文本 -->
                   <!-- 选项实际值 -->
            <el-option
              v-for="item in majorTable"       
              :key="item.value"             
              :label="item.label"            
              :value="item.value"              
            />
          </el-select>
        </el-col>
      </div>

      <!-- 职业筛选下拉菜单 -->
      <div>
        <el-col>
          <span style="margin-right:10px">职业</span>
             <!-- 绑定职业筛选值 -->
              <!-- 下拉框默认提示 -->
                <!-- 下拉框宽度 -->
          <el-select 
            v-model="tableOptions.jobChoice" 
            placeholder="Select"                
            style="width: 240px"                
          >
             <!-- 遍历职业选项 -->
                <!-- 唯一键值 -->
                  <!-- 选项显示文本 -->
                      <!-- 选项实际值 -->
            <el-option
              v-for="item in jobTable"       
              :key="item.value"              
              :label="item.label"             
              :value="item.value"           
            />
          </el-select>
        </el-col>
      </div>

      <!-- 筛选操作按钮 -->
      <div class="mb-4" gutter="20">
        <el-button type="primary" @click="handleChange">查询</el-button> <!-- 触发筛选查询 -->
        <el-button type="default" @click="handleReset">重置</el-button> <!-- 重置筛选条件和搜索框 -->
      </div>
    </el-card>

    <!-- 筛选结果展示卡片 -->
    <el-card class="optionTable" shadow="hover">
      <h3>筛选结果</h3>
      <el-row :gutter="20">
        <el-col :span="22" style="padding: 0px;margin: 0;">
          <!-- 遍历筛选后的结果列表，渲染卡片 -->
          <div v-for="data in list" :key="data.id" style="padding:10px;">
            <!-- 卡片内容区无内边距 -->
               <!-- 鼠标悬停显示阴影 -->
                 <!-- 点击跳转详情页 -->
            <el-card 
              :body-style="{ padding: '0px' }"  
              shadow="hover"                   
              @click="handleChangepage(data.id)" 
            >
              <div style="padding: 14px;float:left;">
                <span>{{ data.title }}</span>  <!-- 显示结果标题 -->
              </div>
            </el-card>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script setup>
// 引入Vue组合式API相关函数
import { ref, reactive, computed, onMounted } from 'vue';
// 引入HTTP请求库
import axios from 'axios';
// 引入路由实例
import router from '@/router';

// 搜索相关响应式变量
const searchText = ref("");          // 搜索关键词
const visible = ref(false);          // 搜索结果浮层显示状态

// 数据列表（响应式）
const list = ref([]);                // 存储筛选/搜索结果数据

// 筛选条件响应式对象
const tableOptions = reactive({
  majorChoice: '',  // 专业筛选值（默认'不限'）
  jobChoice: ''     // 职业筛选值（默认'不限'）
});

// 专业筛选选项配置
const majorTable = [
  { label: '不限', value: '' },        // 空值表示不筛选
  { label: '专业1', value: 'major1' },
  { label: '专业2', value: 'major2' }
];

// 职业筛选选项配置
const jobTable = [
  { label: '不限', value: '' },        // 空值表示不筛选
  { label: '职业1', value: 'job1' },
  { label: '职业2', value: 'job2' }
];

// 计算属性：根据搜索关键词过滤结果列表
const searchlist = computed(() => 
  searchText.value 
    ? list.value.filter(item => item.title.includes(searchText.value)) // 模糊匹配标题
    : [] // 无关键词时返回空数组
);

// 生命周期钩子：组件挂载后加载全部数据
onMounted(async () => {
  await fetchAllData(); // 初始加载全量数据
});

// 获取全部数据的异步函数
const fetchAllData = async () => {
  try {
    const allData = await axios.get("/article/getAll"); // 调用全量数据接口
    list.value = allData.data.data; // 更新数据列表
  } catch (error) {
    console.error("获取全部数据失败:", error); // 错误处理
  }
};

// 筛选查询处理函数
const handleChange = async () => {
  try {
    // 解构获取筛选条件
    const { majorChoice, jobChoice } = tableOptions;
    // 发送带筛选条件的请求
    const siftedData = await axios.get(`/article/findByCategory?job_category=${jobChoice}&major_category=${majorChoice}`);
    list.value = siftedData.data.data; // 更新为筛选后的数据
  } catch (error) {
    console.error("筛选查询失败:", error); // 错误处理
  }
};

// 重置功能处理函数
const handleReset = () => {
  searchText.value = ""; // 清空搜索框
  tableOptions.majorChoice = ""; // 重置专业筛选为'不限'
  tableOptions.jobChoice = ""; // 重置职业筛选为'不限'
  fetchAllData(); // 重新加载全量数据
  visible.value = false; // 隐藏搜索结果浮层
};

// 跳转详情页处理函数
const handleChangepage = (id) => {
  router.push(`information/${id}`); // 跳转到带ID参数的详情页路由
};
</script>

<style scoped lang="scss">
.optionTable {
  margin: 30px; /* 卡片外边距，控制布局间距 */
}

.el-col {
  margin: 10px; /* 列容器外边距，调整筛选组件间距 */
}

.search {
  .el-input {
    width: 50%; /* 搜索输入框宽度占父容器50% */
  }
}

.search-item {
  height: 50px;          /* 搜索结果项高度 */
  line-height: 50px;      /* 行高与高度一致，实现垂直居中 */
  cursor: pointer;        /* 鼠标悬停时显示指针样式 */
  &:hover {
    background: whitesmoke; /* 鼠标悬停背景色 */
    color: #666;           /* 鼠标悬停文字颜色 */
  }
}
</style>